<template>
  <div v-loading="isloading" class="departments">
    <el-card class="card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">
          <div class="content">
            <treeTool :item="topTree" />
            <!-- 分割线 -->
            <hr>
            <el-tree :data="treeList" :props="defaultProps" default-expand-all>
              <template slot-scope="{ data }">
                <treeTool
                  :item="data"
                  @openadd="openadd"
                  @refData="getDepartments"
                  @openedit="openedit"
                />
              </template>
            </el-tree>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- <addDepart
      :show-dialog="showDialog"
      :current-obj="currentObj"
      @update:showDialog="bool => (showDialog = bool)"
      @refresData="getDepartments"
    /> -->
    <!-- .syncd要满足两个条件  1父组件向子组件传入属性， 2子组件需要改变这个属性，
    子组件发送消息给父组件接收一个事件： update:xxx  通过xxx修改这个属性
    上面的代码改写用。sync修饰
    -->
    <addDepart
      ref="myadd"
      :show-dialog.sync="showDialog"
      :current-obj="currentObj"
      @refresData="getDepartments"
    />
  </div>
</template>

<script>
import treeTool from './components/treeTools.vue'
import addDepart from './components/addDepart.vue'
import { getDepartments } from '../../api/departments'
import { department } from '../../utils/index'
export default {
  components: {
    treeTool,
    addDepart
  },
  data() {
    return {
      isloading: false,
      showDialog: false,
      currentObj: {},
      activeName: 'first',
      defaultProps: {
        label: 'name'
      },
      topTree: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        isTop: true
      },
      // 数组结构数据源
      treeList: [
        // { name: '总裁办', manager: '张三', children: [{ name: '秘书' }] },
        // {
        //   name: '行政部',
        //   manager: '李四'
        // },
        // {
        //   name: '财务部',
        //   manager: '王五'
        // }
      ]
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    openedit(item) {
      this.showDialog = true
      this.currentObj = item
      this.$refs.myadd.getDepartmentById(item.id)
    },
    openadd(item) {
      this.showDialog = true
      // console.log(1)
      this.currentObj = item
    },
    async getDepartments() {
      this.isloading = true
      const res = await getDepartments()
      // console.log(res.depts)
      // department(res.depts,'')
      this.treeList = department(res.depts, '')
      // console.log(this.treeList)
      this.topList = { ...this.topTree, ...res.depts[0] }
      this.isloading = false
    }
    // checkinfo(node, data) {
    //   console.log(node)
    //   console.log(data)
    // }
  }
}
</script>

<style lang="scss" scopend>
.departments {
  padding: 20px;
  .card {
    padding: 20px 40px;
    .content {
      padding: 40px;
    }
  }
}
</style>
